<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/head::head('广告 - 广告机管理后台')"></head>
<!--/* <editor-fold desc="define"> */-->
<!--/*@thymesVar id="adminPath" type="java.lang.String"*/-->
<!--/*@thymesVar id="adminRoleID" type="java.lang.Integer"*/-->
<!--/*@thymesVar id="loginUser" type="com.xmlan.machine.module.user.entity.User"*/-->
<!--/*@thymesVar id="page" type="com.github.pagehelper.PageInfo<com.xmlan.machine.module.advertisement.entity.Advertisement>"*/-->
<!--/*@thymesVar id="machineList" type="java.util.List<com.xmlan.machine.module.advertisementMachine.entity.SimpleAdvertisementMachine>"*/-->
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<!--/*@thymesVar id="machineID" type="java.lang.Integer"*/-->
<!--/*@thymesVar id="time" type="java.lang.Integer"*/-->
<!--/*@thymesVar id="addTime" type="java.lang.String"*/-->
<!--/*@thymesVar id="deleteToken" type="java.lang.String"*/-->
<!--/*@thymesVar id="uploadToken" type="java.lang.String"*/-->
<!--/* </editor-fold> */-->

<body>
<th:block th:include="/common/header::header('advertisement')"/>

<main style="z-index: 0;">
  <div class="page-title z-depth-1 blue-grey darken-2">
    <div class="white-text">
      <span class="flow-text">
        <a class="btn-flat"><i class="material-icons white-text">list</i></a>广告列表
      </span>
    </div>
  </div>
  <br/>
  <div id="main-content" class="container">
    <!--/* <editor-fold desc="search box"> */-->
    <div id="search-box">
      <form th:action="@{${adminPath}+'/advertisement/list/1'}" method="post">
        <ul class="collapsible popout" data-collapsible="accordion">
          <li>
            <div class="collapsible-header"><i class="material-icons">search</i>条件搜索</div>
            <div class="collapsible-body">
              <div class="row">
                <div class="col s12 m10 l10 center">
                  <div class="input-field col s6 m3 l3">
                    <input id="name" name="name" th:value="${name}" type="text" placeholder=""/>
                    <label for="name">按广告名称</label>
                  </div>
                  <div class="input-field col s6 m3 l3">
                    <select id="machineID" name="machineID">
                      <option th:each="item:${machineList}" th:value="${item.id}" th:if="${machineID==item.id}"
                              th:text="${item.name}" selected="selected"></option>
                      <option value="-2">不选择</option>
                      <option th:each="item:${machineList}" th:value="${item.id}" th:text="${item.name}"></option>
                    </select>
                    <label for="machineID">按所属广告机</label>
                  </div>
                  <div class="input-field col s6 m3 l3">
                    <input id="time" name="time" th:value="${time}" type="text" placeholder="输入播放时间"
                           onmouseleave="checkNumber()"/>
                    <label for="time">按播放时间</label>
                  </div>
                  <div class="input-field col s6 m3 l3">
                    <input id="addTime" name="addTime" th:value="${addTime}" type="text" class="date-picker"
                           placeholder="选择日期"/>
                    <label for="addTime">按加入时间</label>
                  </div>
                </div>
                <div class="col s12 m2 l2 center">
                  <div class="input-field">
                    <button type="submit" class="btn-floating btn-large waves-effect waves-light green">
                      <i class="material-icons">search</i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </form>
    </div>
    <!--/* </editor-fold> */-->

    <table class="highlight responsive-table">
      <thead>
      <tr>
        <th>名称</th>
        <th>播放时间</th>
        <th>加入时间</th>
        <th>所属机器</th>
      </tr>
      </thead>
      <tbody class="card">
      <tr th:each="item:${page.list}" th:onclick="'javascript:detail(\''+*{item.id}+'\')'">
        <td th:text="*{item.name}">name</td>
        <td th:text="*{item.time}">time</td>
        <td th:text="*{#strings.substring(item.addTime,0,10)}">addTime</td>
        <th:block th:each="machine:${machineList}">
          <td th:if="${machine.id==item.machineID}" th:text="*{machine.name}">machineID</td>
        </th:block>
        <td class="right-align hide-on-med-and-down">
          <div class="fixed-action-btn horizontal" style="position: relative; right: 0; top: 0;">
            <a class="btn-floating btn-large blue"><i class="material-icons">menu</i></a>
            <ul>
              <li>
                <a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="查看详情" href="#detail-modal"
                   th:onmouseover="'javascript:detail(\''+*{item.id}+'\')'">
                  <i class="material-icons">more_horiz</i>
                </a>
              </li>
              <li>
                <a class="btn-floating yellow waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="上传新图片/视频"
                   th:onclick="'javascript:openUploadModal(\''+${item.id}+'\')'"
                   href="#upload-new-image-or-video">
                  <i class="material-icons">file_upload</i>
                </a>
              </li>
              <li>
                <a class="btn-floating green waves-effect waves-light tooltipped"
                   data-position="top" data-delay="50" data-tooltip="编辑"
                   th:href="@{${adminPath}+'/advertisement/form?id='+${item.id}}">
                  <i class="material-icons">edit</i>
                </a>
              </li>
              <li>
                <a class="btn-floating red darken-1 waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="删除" href="#delete-modal"
                   th:onclick="'javascript:prepareForDeleting(\''+${item.id}+'\')'">
                  <i class="material-icons">delete</i>
                </a>
              </li>
            </ul>
          </div>
        </td>
        <td class="hide-on-large-only" id="mobile-table-item-buttons">
          <div class="fixed-action-btn click-to-toggle center-align" style="position: relative; left: 0; top: 0;">
            <a class="btn-floating blue"><i class="material-icons">menu</i></a>
            <ul>
              <li>
                <a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="查看详情" href="#detail-modal"
                   th:onclick="'javascript:detail(\''+*{item.id}+'\')'">
                  <i class="material-icons">more_horiz</i>
                </a>
              </li>
              <li>
                <a class="btn-floating yellow waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="上传新图片/视频"
                   th:onclick="'javascript:openUploadModal(\''+${item.id}+'\')'"
                   href="#upload-new-image-or-video">
                  <i class="material-icons">file_upload</i>
                </a>
              </li>
              <li>
                <a class="btn-floating green waves-effect waves-light tooltipped"
                   data-position="top" data-delay="50" data-tooltip="编辑"
                   th:href="@{${adminPath}+'/advertisement/form?id='+${item.id}}">
                  <i class="material-icons">edit</i>
                </a>
              </li>
              <li>
                <a class="btn-floating red darken-1 waves-effect waves-light tooltipped btn modal-trigger"
                   data-position="top" data-delay="50" data-tooltip="删除" href="#delete-modal"
                   th:onclick="'javascript:prepareForDeleting(\''+${item.id}+'\')'">
                  <i class="material-icons">delete</i>
                </a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      </tbody>
    </table>

    <div id="fixed-add-btn" class="fixed-action-btn">
      <a class="btn-floating btn-large waves-effect waves-light blue" onclick="return hasMachine()"
         th:href="@{${adminPath}+'/advertisement/form'}">
        <i class="large material-icons">add</i>
      </a>
    </div>

    <div id="pagination-div" class="center">
      <ul class="pagination">
        <li  class="waves-effect">
          <h6 >共<b th:text="${page.total}"></b>条结果</h6>
          <a href="#"><i class="material-icons">chevron_left</i></a>
        </li>
        <li th:if="${!page.hasPreviousPage}" class="disabled">
          <a href="#"><i class="material-icons">chevron_left</i></a>
        </li>
        <li th:if="${page.hasPreviousPage}" class="waves-effect">
          <a th:href="@{${adminPath}+'/advertisement/list/'+${page.prePage}+'?name='+${name}+'&machineID='+${machineID}+'&addTime='+${addTime}+'&time='+${time}}"><i
                  class="material-icons">chevron_left</i></a>
        </li>

        <th:block th:each="number : ${page.navigatepageNums}">
          <li th:if="${number==page.pageNum}" class="waves-effect" id="active-page">
            <a href="#" th:text="${number}"></a>
          </li>
          <li th:if="${number!=page.pageNum}" class="waves-effect">
            <a th:href="@{${adminPath}+'/advertisement/list/'+${number}+'?name='+${name}+'&machineID='+${machineID}+'&addTime='+${addTime}+'&time='+${time}}"
               th:text="${number}"></a>
          </li>
        </th:block>

        <li th:if="${!page.hasNextPage}" class="disabled">
          <a href="#"><i class="material-icons">chevron_right</i></a>
        </li>
        <li th:if="${page.hasNextPage}" class="waves-effect">
          <a th:href="@{${adminPath}+'/advertisement/list/'+${page.nextPage}+'?name='+${name}+'&machineID='+${machineID}+'&addTime='+${addTime}+'&time='+${time}}"><i
                  class="material-icons">chevron_right</i></a>
        </li>
      </ul>
    </div>
  </div>

  <!--/* <editor-fold desc="modal"> */-->
  <div id="detail-modal" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4>详情</h4>
      <h6 class="green-text text-darken-2">广告ID</h6>
      <p id="detail-item-id">id</p>
      <h6 class="green-text text-darken-2">名称</h6>
      <p id="detail-item-name">name</p>
      <h6 class="green-text text-darken-2">所属广告机</h6>
      <p id="detail-item-machine-id">machineID</p>
      <h6 class="green-text text-darken-2">播放时间</h6>
      <p id="detail-item-time">time</p>
      <h6 class="green-text text-darken-2">加入时间</h6>
      <p id="detail-item-add-time">addTime</p>
      <h6 class="green-text text-darken-2">图片/视频</h6>
      <p id="detail-item-media">播放内容</p>
      <h6 class="green-text text-darken-2">备注</h6>
      <p id="detail-item-remark">remark</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat" onclick="pauseVideo()">关闭</a>
    </div>
  </div>

  <div id="upload-new-image-or-video" class="modal modal-fixed-footer">
    <input id="upload-target-id" type="hidden"/>
    <form id="upload-image-or-video-form" method="post" enctype="multipart/form-data" action="#"
          onsubmit="return uploadImageOrVideo();">
      <input name="uploadToken" type="hidden" th:value="${uploadToken}">
      <div class="modal-content">
        <h4>上传</h4>
        <div class="col s12 m12 l12">
          <label for="url">选择新的图片或视频</label>
          <div class="file-field input-field">
            <div class="btn">
              <span>浏览</span>
              <input type="file" id="new-file" name="new-file"/>
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text" id="url" name="url"/>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
        <button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat">上传</button>
      </div>
    </form>
  </div>

  <div id="delete-modal" class="modal">
    <form th:action="@{${adminPath}+'/advertisement/delete'}">
      <div class="modal-content">
        <h4>注意！</h4>
        <input name="deleteToken" type="hidden" th:value="${deleteToken}">
        <input id="delete-confirm-id" name="id" type="hidden"/>
        <p>是否要删除广告 <span id="delete-name"></span> ?</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">不是</a>
        <button type="submit" class="modal-action modal-close waves-effect btn-flat">是</button>
      </div>
    </form>
  </div>
  <!--/* </editor-fold> */-->
</main>delete-name

<th:block th:include="/common/footer::footer"/>
<th:block th:include="/common/script::script"/>
<script type="text/javascript">
    $(function () {
        resize_footer(window.screen.width);
        $('#button-nav-menu').sideNav({
            closeOnClick: true,
            draggable: true
        });
        $('.dropdown-button').dropdown();
        $('.date-picker').pickadatee({
            closeOnSelect: true
        });
        $("#detail-modal").modal();
        $("#upload-new-image-or-video").modal();
        $("#delete-modal").modal({
            complete: function () {
                $("#delete-confirm-id").val(-2);
                $("#delete-name").text(null);
            }
        });
        $("#machineID").material_select();
        toast('[[${message}]]');
    });

    function detail(id) {
        var url = '[[${adminPath}]]/advertisement/detail/' + id;
        var request_url = '[[${adminPath}]]/advertisement/media/' + id;
        $.ajax({
            url: url,
            type: "GET",
            success: function (data) {
                $("#detail-item-id").text(data['ad'].id);
                $("#detail-item-name").text(data['ad'].name);
                $("#detail-item-machine-id").text(data['machine']);
                $("#detail-item-time").text(data['ad'].time);
                $("#detail-item-add-time").text(data['ad'].addTime);
                if (data['ad'].url !== null && data['ad'].url.indexOf("images") !== -1) {
                    $("#detail-item-media").html(
                        '<img id="ad-image" class="materialboxed" width="450" src="' + request_url + '"/>'
                    );
                } else if (data['ad'].url !== null && data['ad'].url.indexOf("videos") !== -1) {
                    $("#detail-item-media").html(
                        '<video id="ad-video" width="100%" height="100%" controls="controls">' +
                        '    <source src="' + request_url + '" type="video/mp4"/>' +
                        '</video>'
                    );
                } else {
                    $("#detail-item-media").text('暂无广告图片/视频');
                }
                $("#detail-item-remark").text(data['ad'].remark);
            },
            error: function () {
            }
        });
    }

    function uploadImageOrVideo() {
        var file = $("#url").val();
        if (file === '') {
            toast("没有选择文件，该广告的图片/视频没有更新。");
            return false;
        } else {
            var id = $("#upload-target-id").val();
            var url = '[[${adminPath}]]/advertisement/uploadMedia/' + id;
            $("#upload-image-or-video-form").attr('action', url);
            $("#upload-image-or-video-form").submit();
            return true;
        }
    }

    function openUploadModal(id) {
        $("#new-file").val(null);
        $("#url").val(null);
        $("#upload-target-id").val(id);
    }

    function prepareForDeleting(id) {
        $("#delete-confirm-id").val(id);
        $.ajax({
            url: '[[${adminPath}]]/advertisement/detail/' + id,
            type: "GET",
            success: function (data) {
                $("#delete-name").text(data['ad'].name);
            }
        })
    }

    function pauseVideo() {
        var video = $("#ad-video");
        if (video) {
            video.get(0).pause();
        }
    }

    function hasMachine() {
        var machines = parseInt('[[${machines}]]');
        if (machines === 0) {
            toast("没有可用的广告机");
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>